<template>
	<view class="content" @tap.stop="$refs.uniselect.close()">
        <u-navbar :safeAreaInsetTop="true" :placeholder="true" :fixed="true" 
            @leftClick="back" title="工资专户"  rightIcon="search" @rightClick="rightClick">
        </u-navbar>
        <uni-select class="uniselect" :style="{top:systemInfo.headerH+'px'}"
            ref="uniselect" bgColor="#fff" :selectData="selectData" @select="select">
        </uni-select>
        <view style="height:74rpx"></view>


        <view class="uni-area">
            <!-- 专户统计 -->
            <view v-if="1==2" class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                <qiun-title-bar title="专户统计"/>
                <view style="height:400rpx">
                    <qiun-data-charts type="column" :opts="fohfData.opts" :chartData="fohfData"/>
                </view>
            </view>

            <!-- 银行专户余额 -->
            <view class="u-m-t-30 uni-shadow u-p-l-10 u-p-t-10 uni-echarts-box">
                <qiun-title-bar title="银行专户余额"/>
                <view style="height:400rpx">
                    <qiun-data-charts type="column" 
                        :ontouch="true" :canvas2d="true"
                        :opts="bankFohfData.opts" :chartData="bankFohfData"/>
                </view>
            </view>

            <!-- 专户列表 -->
            <view class="u-m-t-50 u-font-32 font-bold">专户列表</view>
            <uni-item-fohf class="u-m-t-30" v-for="(tem,ind) in page.list" :key="ind" :listItem="tem" />

            <!-- 返回顶部 -->
            <u-back-top :scroll-top="page.scrollTop" duration="3000" @tap="toTop"></u-back-top>
            <!-- 加载更多 -->
            <u-loadmore :status="page.status" />
        </view>

        <!-- 提示组件 -->
        <u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                // 设备信息
                systemInfo: uni.getStorageSync('systemInfo'),
                // 下拉选择数据
				selectData:[
                    { label: "属地", list: [], show: false, type: "districtId", value: '' },
                    { label: "全部开户银行", list: [], show: false, type: "bankType", value: '' },
                ],
                // 参数
                prameter:{
                    districtId: '', // 区划值【非必传】
                    bankType:'', // 开户银行【非必传】 
                },
                // 专户统计
                fohfData:{
                    categories: [ "专户数","拨付金额","发放金额","累积金额"],
                    series: [
                        // {
                            // name: "目标值",
                            // data: [
                            //     {field:'account', color:'#13A4FE',value: 0},
                            //     {field:'disburse', color:'#C2CCD8',value: 0},
                            //     {field:'salary', color:'#FFB61D',value: 0},
                            //     {field:'balance', color:'#21D6F3',value: 0}, // 专户余额
                            // ],
                            // textOffset: 50,
                            // textColor: '#fff'
                        // },
                    ],
                    opts:{
                        legend:{
                            show:false
                        },
                        extra: {
                            column: {
                                "width": 42,
                            },
                        },
                    },
                },
                // 银行专户余额
                bankFohfData:{
                    categories: [], // "农业银行","建设银行","交通银行","中国银行"
                    series: [
                        // {
                            // name: "目标值",
                            // data: [], // 210, 162, 138,80
                            // textOffset: 50,
                            // textColor: '#fff'
                        // },
                    ],
                    opts:{
                        legend:{ show:false },
                        extra: {column: {width: 42} },
                        xAxis:{
                            rotateLabel: false,
                            // scrollShow:true, itemCount:100, disableGrid:true
                        },
                        // enableScroll: true,
                    }
                },
                // 分页相关参数
                paging:{
                    pageNum: 1,
                    pageSize: this.$config.pageSize,
                },
                page:{
                    scrollTop: 0,
                    status: 'loading',
                    total: 0,
                    list: [], // 列表
                },
			}
		},

        onPageScroll(e) {
            this.page.scrollTop = e.scrollTop;
        },
        onReachBottom(){
            if( this.page.list.length < this.page.total ){
                this.paging.pageNum += 1
                this.page.status = 'loading'
                this.getFohfList()
            }else{
                this.page.status = 'nomore'
            }
        },

		onLoad() {
            // 属地
            this.$tools.getNationFn(this,{},res=>{
                this.selectData.splice(0,1,res)
                this.prameter.districtId = res.value
            })
            // 开户银行名称
            this.$tools.fohfBankFn(this,res=>{
                this.selectData.splice(1,1,res)
                this.prameter.bankType = res.value
            })
            // 专户统计
            // this.getFohfAccStatistics()
            // 银行专户余额
            this.getAccbByBank()
            // 专户列表
            this.getFohfList()
		},

		methods: {
            // 返回
            back(){
                uni.navigateBack()
            },
            // 搜索
            rightClick(){
                uni.navigateTo({ url: '/pages/common/search?type=fohf' })
            },


            // 专户统计
            getFohfAccStatistics(){
                // console.log('专户统计-参数',this.prameter)
                this.$request(this,this.$apis.fohfAccStatistics,this.prameter).then(res=>{
                    // console.log('专户统计',res)
                    this.fohfData.series = [
                        {
                            name: "目标值",
                            data: [
                                {field:'account', color:'#13A4FE',value: 0},
                                {field:'disburse', color:'#C2CCD8',value: 0},
                                {field:'salary', color:'#FFB61D',value: 0},
                                {field:'balance', color:'#21D6F3',value: 0}, // 专户余额
                            ],
                        },
                    ]
                    this.fohfData.series[0].data.map((v,i)=>{
                        v.value = res[v.field]
                    })
                }).then()
            },
            // 银行专户余额
            getAccbByBank(){
                // console.log('银行专户余额-参数',this.prameter)
                this.$request(this,this.$apis.fohfAccbByBank,this.prameter).then(res=>{
                    // console.log('银行专户余额',res)
                    this.bankFohfData.categories = []
                    this.bankFohfData.series = [ { name: "目标值", data: [] } ]
                    res.map((v,i)=>{
                        this.bankFohfData.categories.push(v.bankType.replace(/中国/g, ''))
                        this.bankFohfData.series[0].data.push(v.balance)
                    })
                }).then()
            },
            // 专户列表
            getFohfList(){
                uni.showLoading({ title:'专户列表加载中' })
                const prameter = Object.assign(this.prameter,this.paging)
                // console.log('专户列表---参数',prameter)
                this.$request(this,this.$apis.fohfAccountList,prameter).then(res=>{
                    console.log('专户列表',res)
                    this.page.total = res.total
                    if( res.total && res.total != 0 ){
                        this.status = 'loadmore'
                        res.data.map((v,i)=>{
                            this.page.list.push(v)
                        })
                    }else{
                        this.page.total = 0
                        this.page.status = 'nomore'
                        this.$tools.uToast(this,'default','','暂未查询到过多专户列表相关数据',3000)
                    }
                }).then()
            },


            // 下拉选择
            select(e){
                this.prameter[e.type] = e.value
                // 专户统计
                this.getFohfAccStatistics()
                // 银行专户余额
                this.getAccbByBank()
                // 专户列表
                this.paging.pageNum = 1
                this.page.list = []
                this.toTop()
                this.getFohfList()
            },


            // 回到顶部
            toTop(){
                uni.pageScrollTo({ scrollTop: 0, duration: 300 })
            }
		}
	}
</script>

<style scoped lang="scss">
    .content{
        .uniselect{
            width: 100%;
            position: fixed !important;
            left: 0;
        }
    }
</style>
